<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <title>Document</title>
</head>
<body>

<!--主界面的展示的查询和数据展示-->
<div id="app">
<!--上方搜索栏以及三个按钮-->
    <el-row class="demo-autocomplete">
        <el-col :span="6">
            渠道名称:
            <el-input v-model="mon.ditchAllname" style="width: 180px" size="medium" placeholder="请输入渠道名称"></el-input>
        </el-col>
        <el-col :span="6">
            手机号:
            <el-input v-model="mon.contactsTelphone"  style="width: 180px" size="medium" placeholder="请输入手机号"></el-input>
        </el-col>
        <el-col :span="6">
            业务类型:
            <!--            <el-input v-model="pro.productType" style="width:150px"  size="mini" placeholder="请输入内容"></el-input>-->
            <el-select v-model="mon.businessType"  size="medium" placeholder="请选择产品类型">
                <el-option label="------" value=""></el-option>
                <el-option label="车贷" value="-1"></el-option>
                <el-option label="信贷" value="1"></el-option>
            </el-select>
            <el-col :span="6">
                <!--   空栏防止输入框往有边跑-->
            </el-col>
        </el-col>
    </el-row>
    <br>
    <el-row>
        <el-col :span="6">
            渠道状态:
            <el-input v-model="mon.status" style="width: 180px" size="medium" placeholder="请输入状态"></el-input>
        </el-col>
        </el-col>

        <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" size="small" @click="getData()">查询</el-button>
            <el-button type="primary" icon="el-icon-circle-plus-outline"  size="small" @click="addMonDit()">新增渠道</el-button>
            <!--<el-button type="primary" size="small" @click="">导出</el-button>-->
            <el-button type="primary" size="small" @click="exportList()"><i class="el-icon-upload el-icon--left">导出</i></el-button>
        </el-col>


        <el-col :span="12"></el-col>
    </el-row>
    <br>



<!--table 模板  ：data 绑定了数据 tableData-->
<template>
    <el-table

            :data="tableData"
            border
            style="width: 100%;font-size: 10px"
            :row-class-name="tableRowClassName"
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}">
        <el-table-column prop="ditchNums"  label="渠道编号" width="110">

        </el-table-column>
        <el-table-column prop="ditchAllname" label="渠道名称(简称)" width="120">
        </el-table-column>

        <el-table-column prop="status" label="状态" width="100">
        </el-table-column>

        <el-table-column prop="contactsTelphone" label="联系人手机" width="120">
        </el-table-column>

        <el-table-column prop="businessType" label="业务类型" width="80">
        </el-table-column>
        <el-table-column prop="ditchAdminAccount" label="创建人账号" width="120">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"  :formatter="dateFormatter"  width="180">
        </el-table-column>

        <el-table-column label="操作" width="180">
            <template slot-scope="scope">
                <!--handleClick 为点击查看点击事件,括号内的scope.row为当前行的所有参数,要拿什么参数,直接 scope.row参数名-->
                <el-button @click="dialogFormVisibleSelect=true,handleClick(scope.row);" type="text" size="small">查看</el-button>
<!--                <el-button type="text" size="small"     @click=" dialogFormVisible=true,fill_productInfo(scope.row)" >编辑</el-button>-->
                <el-button @click="dialogFormVisible=true,fill_productInfo(scope.row)" v-if="scope.row.status=='已禁用'" type="text"  size="small"><span>编辑</span></el-button>
                <el-button @click="settle(scope.row.id,scope.row.status)" v-if="scope.row.status=='已禁用'" type="text"  size="small"><span>启用</span></el-button>
                <el-button @click="settle(scope.row.id,scope.row.status)" v-if="scope.row.status=='已启用'" type="text"  size="small"><span>禁用</span></el-button>

            </template>
        </el-table-column>
    </el-table>
</template>



<!-- 编辑或查看界面-->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" fullscreen="true" >
        <el-form :model="form"  :inline="true">
            <el-row>
                <el-col :span="24">渠道商信息:</el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="渠道名称"   :label-width="formLabelWidth">
                        <el-input v-model="form.ditchAllname" style="width: 180px" autocomplete="off" placeholder="请输入渠道名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="公司简称"  :label-width="formLabelWidth">
                        <el-input v-model="form.ditchSimplenessName" style="width: 180px" autocomplete="off" placeholder="请输入渠道简称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="公司全名"  :label-width="formLabelWidth">
                        <el-input v-model="form.companyAllName" style="width: 180px" autocomplete="off" placeholder="请输入渠道简称"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="业务类型"  :label-width="formLabelWidth">
                        <el-select v-model="form.businessType" style="width: 180px" placeholder="选择还款方式">
                            <el-option label="车贷" value="车贷"></el-option>
                            <el-option label="信贷" value="信贷"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="24">管理员信息</el-col>
            </el-row>
            <br>
                <el-row>
                <el-col :span="8">
                    <el-form-item label="渠道管理员账号"  :label-width="formLabelWidth">
                        <el-input v-model="form.ditchAdminAccount" style="width: 180px" autocomplete="off" placeholder=""></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建人人姓名"  :label-width="formLabelWidth">
                        <el-input v-model="form.contactName" style="width: 180px" autocomplete="off" placeholder=""></el-input>
                        </el-input>
                    </el-form-item>
                </el-col>
                    <el-col :span="8">
                        <el-form-item label="创建人身份证"  :label-width="formLabelWidth">
                            <el-input v-model="form.contactIdcard" style="width: 180px" autocomplete="off" placeholder=""></el-input>
                            </el-input>
                        </el-form-item>
                    </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="创建人人电话"  :label-width="formLabelWidth">
                        <el-input v-model="form.contactsTelphone" style="width: 180px" autocomplete="off" placeholder=""></el-input>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <br>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible=false,erro()">取 消</el-button>
            <el-button type="primary" @click="mod(form.id)">确 定</el-button>
        </div>
    </el-dialog>

    <!--Element分頁插件 有待改进-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="totalCount">
    </el-pagination>

</div>

<div id="lookMoneyDitch" >

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" fullscreen="true" >
        <el-form :model="form"  :inline="true">
            <el-row>
                <el-col :span="24">渠道商信息:</el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="渠道名称"   :label-width="formLabelWidth">
                        <el-input v-model="form.ditchAllname" style="width: 180px" autocomplete="off" placeholder="请输入渠道名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="公司简称"  :label-width="formLabelWidth">
                        <el-input v-model="form.ditchSimplenessName" style="width: 180px" autocomplete="off" placeholder="请输入渠道简称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="公司全名"  :label-width="formLabelWidth">
                        <el-input v-model="form.companyAllName" style="width: 180px" autocomplete="off" placeholder="请输入渠道简称"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="业务类型"  :label-width="formLabelWidth">
                        <el-select v-model="form.businessType" style="width: 180px" placeholder="选择还款方式">
                            <el-option label="车贷" value="车贷"></el-option>
                            <el-option label="信贷" value="信贷"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="24">管理员信息</el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="渠道管理员账号"  :label-width="formLabelWidth">
                        <el-input v-model="form.ditchAdminAccount" style="width: 180px" autocomplete="off" placeholder=""></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建人人姓名"  :label-width="formLabelWidth">
                        <el-input v-model="form.contactName" style="width: 180px" autocomplete="off" placeholder=""></el-input>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建人身份证"  :label-width="formLabelWidth">
                        <el-input v-model="form.contactIdcard" style="width: 180px" autocomplete="off" placeholder=""></el-input>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="创建人人电话"  :label-width="formLabelWidth">
                        <el-input v-model="form.contactsTelphone" style="width: 180px" autocomplete="off" placeholder=""></el-input>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <br>

        <div slot="footer" class="dialog-footer">
<!--            <el-button @click="dialogFormVisible=false,erro()">取 消</el-button>-->
            <el-button type="primary" @click="dialogFormVisible=false">关闭</el-button>
        </div>

        <div>
            <template>
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%;font-size: 10px"
                        :row-class-name="tableRowClassName"
                        :header-cell-style="{'text-align':'center'}"
                        :cell-style="{'text-align':'center'}">
                    <el-table-column prop="productNums"  label="产品编号" width="120">

                    </el-table-column>
                    <el-table-column prop="productName" label="产品名称" width="120">
                    </el-table-column>

                    <el-table-column prop="productStatus" label="状态" width="120">
                    </el-table-column>

                    <el-table-column prop="ditchNums" label="渠道数" width="120">
                    </el-table-column>
                    <el-table-column prop="endPerson" label="最后更新人" width="120">
                    </el-table-column>

                    <el-table-column prop="createTime" label="创建时间" :formatter="dateFormatter"  width="200">
                    </el-table-column>


                </el-table>

            </template>
        </div>

    </el-dialog>



</div>


<!--新增编辑界面-->
<div id="apps">
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" fullscreen="true" >
        <el-form :model="form"  :inline="true">
            <el-row>
                <el-col :span="24">渠道商信息:</el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="渠道名称"   :label-width="formLabelWidth">
                        <el-input v-model="form.ditchAllname" style="width: 180px" autocomplete="off" placeholder="请输入渠道名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="公司简称"  :label-width="formLabelWidth">
                        <el-input v-model="form.ditchSimplenessName" style="width: 180px" autocomplete="off" placeholder="请输入渠道简称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="公司全名"  :label-width="formLabelWidth">
                        <el-input v-model="form.companyAllName" style="width: 180px" autocomplete="off" placeholder="请输入渠道简称"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="业务类型"  :label-width="formLabelWidth">
                        <el-select v-model="form.businessType" style="width: 180px" placeholder="选择还款方式">
                            <el-option label="车贷" value="车贷"></el-option>
                            <el-option label="信贷" value="信贷"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="24">管理员信息</el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="渠道管理员账号"  :label-width="formLabelWidth">
                        <el-input v-model="form.ditchAdminAccount" style="width: 180px" autocomplete="off" placeholder=""></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建人人姓名"  :label-width="formLabelWidth">
                        <el-input v-model="form.contactName" style="width: 180px" autocomplete="off" placeholder=""></el-input>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建人身份证"  :label-width="formLabelWidth">
                        <el-input v-model="form.contactIdcard" style="width: 180px" autocomplete="off" placeholder=""></el-input>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="创建人人电话"  :label-width="formLabelWidth">
                        <el-input v-model="form.contactsTelphone" style="width: 180px" autocomplete="off" placeholder=""></el-input>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <br>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible=false,erro()">取 消</el-button>
            <el-button type="primary" @click="pInfo()">确 定</el-button>
        </div>
    </el-dialog>

</div>



<script>
    let lookMonDit = new Vue({
        el:"#lookMoneyDitch",

        data(){
            return {
                tableData:[],
                dialogFormVisible:false,
                dialogFormVisibleBg:false,
                form:{
                    //渠道编号  简称：ditchAllname       类型：businessType   创建人：ditchAdminAccount
                    // 手机号：contactsTelphone      公司全称companyAllName  公司简称ditchSimplenessName
                    id:'',
                    ditchAllname :'',   //渠道名称
                    ditchSimplenessName:'', //渠道简称
                    companyAllName:'',   //公司全名
                    businessType:'',    //业务类型
                    ditchAdminAccount:'',  //渠道管理员
                    contactName :'',       //联系人姓名
                    contactIdcard:'',     //联系人身份证
                    contactsTelphone :''   //创建人人电话
                },
        }

        },
        methods:{
            //分页显示的方法和代码
            getData(){




                // 这里使用axios，使用时请提前引入
                axios.get("/cs/product/ditchproduct",{
                        params:{


                            id:lookMonDit.form.id,



                            // productNums:this.pro.productNums,
                            // productName:this.pro.productName,
                            // productType:statusRaw
                        }
                    },{emulateJSON: true},
                    {
                        headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
                    }
                ).then(res=>{


                    // 将数据赋值给tableData
                    this.tableData=res.data
                    // 将数据的长度赋值给totalCount
                    //this.totalCount=reponse.data.total

                })
            },             //分页方法结束的地方




        },
    });

</script>


<!--新增js代码-->
<script>
   //新增功能js代码
    let addMoneyDitch = new Vue({
        el:"#apps",
        data:{
            dialogFormVisible:false,

            form:{
                id:'',
                ditchAllname :'',   //渠道名称
                ditchSimplenessName:'', //渠道简称
                companyAllName:'',   //公司全名
                businessType:'',    //业务类型
                ditchAdminAccount:'',  //渠道管理员
                contactName :'',       //联系人姓名
                contactIdcard:'',     //联系人身份证
                contactsTelphone :''   //创建人人电话
            }
        },
        methods: {
            //增加产品模态框后 ， 点击确认键后增加产品
            pInfo(){
                //console.info("yououououo");
                if ( addMoneyDitch.form.ditchAllname ==''){
                    alert("请输入渠道名称");
                }else if (addMoneyDitch.form.ditchSimplenessName==''){
                    alert("请输入公司简称");
                }else if (addMoneyDitch.form.companyAllName==''){
                    alert("请输入公司全名");
                }else if (addMoneyDitch.form.businessType==''){
                    alert("业务类型");
                }else if(addMoneyDitch.form. ditchAdminAccount==''){
                    alert("请输入管理员账号");
                }else if(addMoneyDitch.form.contactName==''){
                    alert("请输入创建人姓名");
                }else if(addMoneyDitch.form.contactIdcard==''){
                    alert("请输入创建人身份证");
                } else if(addMoneyDitch.form.contactsTelphone==''){
                    alert("请输入创建人电话");
                } else {
                    let params =new FormData();
                    params.append("ditchAllname",addMoneyDitch.form.ditchAllname);
                    params.append("ditchSimplenessName",addMoneyDitch.form.ditchSimplenessName);
                    params.append("companyAllName",addMoneyDitch.form.companyAllName);
                    params.append("contactsTelphone",addMoneyDitch.form.contactsTelphone);
                    params.append("businessType",addMoneyDitch.form.businessType);
                    params.append("ditchAdminAccount",addMoneyDitch.form.ditchAdminAccount);
                    params.append("contactName",addMoneyDitch.form.contactName);
                    params.append("contactIdcard",addMoneyDitch.form.contactIdcard);


                    // params.append("roleBean.id","2");
                    axios.post("/cs/monditch/more",params)
                        .then(function (res) {
                            alert("添加成功");
                            console.log(res);
                            location.reload();
                        })
                        .catch(function (error) {

                            console.log(error);
                            addproductInfo.dialogFormVisible = false;
                        });
                }
            }

        }


    })
</script>


</body>

<!--分页展示的js代码-->
<script>

    let demo = new Vue({
        el:"#app",
        data() {
            return{


                //分页插件的数据
                // 总数据
                tableData:[],
                // 默认显示第几页
                currentPage:1,
                // 总条数，根据接口获取数据长度(注意：这里不能为空)
                totalCount:1,
                // 个数选择器（可修改）
                pageSizes:[1,2,3,4],
                // 默认每页显示的条数（可修改）
                PageSize:1,
                tableData: [],  //  datas数据 中的数组goods
                //分页插件数据截停止

                dialogFormVisible:false,



                mon:{
                    ditchAllname:'',
                    contactsTelphone:'',
                    businessType:'',
                    status:''
                },

                //编辑框内form表单的数据
                form:{
                    //渠道编号  简称：ditchAllname       类型：businessType   创建人：ditchAdminAccount
                    // 手机号：contactsTelphone      公司全称companyAllName  公司简称ditchSimplenessName
                    id:'',
                    ditchAllname :'',   //渠道名称
                    ditchSimplenessName:'', //渠道简称
                    companyAllName:'',   //公司全名
                    businessType:'',    //业务类型
                    ditchAdminAccount:'',  //渠道管理员
                    contactName :'',       //联系人姓名
                    contactIdcard:'',     //联系人身份证
                    contactsTelphone :''   //创建人人电话

                }


            }
        },
        methods:{



            handleClick:function(row){
                lookMonDit.dialogFormVisible=true;


                lookMonDit.form.id=row.id;
                lookMonDit.form.ditchAllname=row.ditchAllname;
                lookMonDit.form.ditchSimplenessName=row.ditchSimplenessName;
                lookMonDit.form.businessType=row.businessType;
                lookMonDit.form.ditchAdminAccount=row.ditchAdminAccount;
                lookMonDit.form.contactName=row.contactName;
                lookMonDit.form.companyAllName=row.companyAllName;
                lookMonDit.form.contactIdcard=row.contactIdcard;
                lookMonDit.form.contactsTelphone=row.contactsTelphone;
                lookMonDit.getData();

            },
            exportList:function (){
                //转换一下，提交转换后的对象
                let tableDataJson=JSON.stringify(demo.tableData);
                axios.post("monditch/exportList",tableDataJson,
                    {headers:
                            {'Content-Type':'application/json;'}
                    })
            .then((response)=>{
                        alert("导出成功！")
                            //console.log(response)
                            })
                            .catch((err)=>{console.log(err)});
                    },



                    //更改状态（已启用和已禁用）
            settle:function(ids,sta){
                let id = ids;
                let status =sta;

                let params = new FormData();
                params.append("id",id);
                params.append("status",status)

                axios.put("monditch/upsta",params
                ).then(res => {
                    console.log(res);
                    location.reload();
                }).catch(function (error) {
                    console.log(error);
                });
            },


            //点击新增按钮之后，出现新增的全屏模态框
            addMonDit:function(){
               //alert("展示新增界面")
                addMoneyDitch.dialogFormVisible=true;



            },
            // ditchAllname :'',   //渠道名称
            // ditchSimplenessName:'', //渠道简称
            // companyAllName:'',   //公司全名
            // businessType:'',    //业务类型
            // ditchAdminAccount:'',  //渠道管理员
            // contactName :'',       //联系人姓名
            // contactIdcard:'',     //联系人身份证
            // contactsTelphone :''   //创建人人电话
             mod:function(id){
                //alert("你是谁？");

                let params =new FormData();
                params.append("id",demo.form.id);
                params.append("ditchAllname",demo.form.ditchAllname);
                params.append("ditchSimplenessName",demo.form.ditchSimplenessName);
                params.append("companyAllName",demo.form.companyAllName);
                params.append("businessType",demo.form.businessType);
                params.append("ditchAdminAccount",demo.form.ditchAdminAccount);
                params.append("contactName",demo.form.contactName);
                params.append("contactIdcard",demo.form.contactIdcard);
                params.append("contactsTelphone",demo.form.contactsTelphone);

                axios.put("/cs/monditch/"+id,params).then(res => {
                    console.log(res);
                    location.reload();
                }).catch(function (error) {
                   // console.log(error);
                });
            },

            erro:function(){
                //编辑 全屏模态框 的取消按钮对应的方法

             },

            fill_productInfo(row){


                    demo.form.id=row.id;
                    demo.form.ditchAllname=row.ditchAllname;
                    demo.form.ditchSimplenessName=row.ditchSimplenessName;
                    demo.form.businessType=row.businessType;
                    demo.form.ditchAdminAccount=row.ditchAdminAccount;
                    demo.form.contactName=row.contactName;
                    demo.form.companyAllName=row.companyAllName;
                    demo.form.contactIdcard=row.contactIdcard;
                    demo.form.contactsTelphone=row.contactsTelphone;

            },


            // 日期格式化
            dateFormatter (row, column) {
                let datetime = row.createTime;
                if(datetime){
                    datetime = new Date(datetime);
                    let y = datetime.getFullYear() + '-';
                    let mon = datetime.getMonth()+1 + '-';
                    let d = datetime.getDate() +' ';
                    let hourTemp=datetime.getHours();
                    if (hourTemp<10){
                        hourTemp='0'+hourTemp;
                    }
                    let hour = hourTemp+':';
                    let minuteTemp=datetime.getMinutes();
                    if (minuteTemp<10){
                        minuteTemp='0'+minuteTemp;
                    }
                    let minute = minuteTemp+':';
                    let secondTemp=datetime.getSeconds();
                    if (secondTemp<10){
                        secondTemp='0'+secondTemp;
                    }
                    let second = secondTemp;
                    return y + mon + d+ hour+ minute+ second;
                }
                return ''
            },

            //分页显示的方法和代码
            getData(){

                let statusRaw='';
                if (this.mon.businessType=='-1'){
                    statusRaw='车贷';
                }else if (this.mon.businessType=='1'){
                    statusRaw='信贷';
                }

                // 这里使用axios，使用时请提前引入
                axios.get("/cs/monditch/page",{
                        params:{
                            limit:10,
                            pageNum:this.currentPage,
                            offset:(this.currentPage-1)*10,
                            ditchAllname:this.mon.ditchAllname,
                            contactsTelphone:this.mon.contactsTelphone,
                            businessType:statusRaw,
                            status:this.mon.status,



                            // productNums:this.pro.productNums,
                            // productName:this.pro.productName,
                            // productType:statusRaw
                        }
                    },{emulateJSON: true},
                    {
                        headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
                    }
                ).then(reponse=>{

                    //alert("我进回调函数了");
                    console.log(reponse)
                    // 将数据赋值给tableData
                    this.tableData=reponse.data.rows
                    // 将数据的长度赋值给totalCount
                    this.totalCount=reponse.data.total

                })
            },             //分页方法结束的地方


            // 分页
            // 每页显示的条数
            handleSizeChange(val) {
                // 改变每页显示的条数
                this.PageSize=val
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage=1
            },
            // 显示第几页
            handleCurrentChange(val) {
                // 改变默认的页数
                this.currentPage=val
                this.getData()
            },

            //为鼠标移动上去的js样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'success-row';

                } else if (rowIndex % 2 === 2) {
                    return 'warning-row';
                }
                return '';
            },

        },
        created:function () { //挂载完成，就是页面内容加载完成后
            //alert("挂在完成")
            this.getData();
        }
    })

</script>

</html>
